<template>
  <view class="index-container">
    <!-- 顶部背景 -->
    <view class="header-bg">
      <image src="/static/images/tower.png" mode="aspectFill" class="bg-image"></image>
      <view class="header-content">
        <image src="/static/images/logo.png" mode="aspectFit" class="logo"></image>
        <view class="title">智能化报销管控平台</view>
      </view>
    </view>
    
    <!-- 欢迎信息 -->
    <view class="welcome-box">
      <text class="welcome-text">您好，{{ userInfo.name }}</text>
      <text class="welcome-desc">欢迎使用智能化报销管控平台</text>
    </view>
    
    <!-- 功能区域 -->
    <view class="function-area">
      <view class="function-title">查看中心</view>
      <view class="function-grid">
        <view class="function-item" @click="navigateTo('/pages/receipt/upload')">
          <u-icon name="file-text" size="50" color="#1890ff"></u-icon>
          <text class="function-name">招待费用报销</text>
        </view>
        <view class="function-item" @click="navigateTo('/pages/car/verify')">
          <u-icon name="car" size="50" color="#1890ff"></u-icon>
          <text class="function-name">私车公用报销</text>
        </view>
        <view class="function-item" @click="navigateTo('/pages/center/index')">
          <u-icon name="search" size="50" color="#1890ff"></u-icon>
          <text class="function-name">查询报表查询</text>
        </view>
      </view>
    </view>
    
    <!-- 通知公告 -->
    <view class="notice-area">
      <view class="notice-title">
        <u-icon name="volume" color="#1890ff" size="20"></u-icon>
        <text>通知公告</text>
      </view>
      <view class="notice-content">
        <u-swiper
          :list="noticeList"
          mode="dot"
          height="100"
          @click="clickNotice"
        ></u-swiper>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data() {
    return {
      noticeList: [
        {
          image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
          title: '关于私车公用报销新规则的通知'
        },
        {
          image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
          title: '招待费用电子凭证防伪系统上线通知'
        },
        {
          image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
          title: '报销流程优化调整通知'
        }
      ]
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    })
  },
  onLoad() {
    // 检查登录状态
    const token = uni.getStorageSync('token')
    if (!token) {
      uni.reLaunch({
        url: '/pages/login/index'
      })
    }
  },
  methods: {
    // 页面跳转
    navigateTo(url) {
      uni.navigateTo({ url })
    },
    
    // 点击通知
    clickNotice(index) {
      uni.showToast({
        title: `您点击了"${this.noticeList[index].title}"`,
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.index-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header-bg {
  position: relative;
  height: 300rpx;
  overflow: hidden;
  
  .bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  
  .header-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    
    .logo {
      width: 120rpx;
      height: 120rpx;
    }
    
    .title {
      margin-top: 20rpx;
      font-size: 36rpx;
      color: #ffffff;
      font-weight: bold;
    }
  }
}

.welcome-box {
  background-color: #ffffff;
  padding: 30rpx;
  margin: -50rpx 30rpx 30rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 10;
  
  .welcome-text {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
  }
  
  .welcome-desc {
    font-size: 28rpx;
    color: #666666;
    margin-top: 10rpx;
  }
}

.function-area {
  background-color: #ffffff;
  padding: 30rpx;
  margin: 0 30rpx 30rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  
  .function-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 30rpx;
  }
  
  .function-grid {
    display: flex;
    justify-content: space-between;
  }
  
  .function-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30%;
    
    .function-name {
      margin-top: 20rpx;
      font-size: 28rpx;
      color: #333333;
    }
  }
}

.notice-area {
  background-color: #ffffff;
  padding: 30rpx;
  margin: 0 30rpx 30rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  
  .notice-title {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    
    text {
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
      margin-left: 10rpx;
    }
  }
  
  .notice-content {
    height: 200rpx;
  }
}
</style> 